<template>
  <div class="login_box">
    <router-link to="/Index">
      <div class="back">&lt;</div>
    </router-link>
    <p>欢迎登录TOPSPORTS</p>
    <div class="msg">
      <div>
        手机号码<input
          type="text"
          placeholder="请输入您的手机号"
          class="phone"
          v-model="username"
        />
      </div>
      <br />
      <div>
        密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码<input
          type="password"
          placeholder="请输入密码"
          class="pwd1"
          v-model="userpwd1"
        />
      </div>
      <button @click="loginSave">登录</button>
      <router-link to="/Reg"><i>没有账号，点击注册</i></router-link>
    </div>
    <div class="wei">
      <img src="image/weichat.jpg" alt="" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";
import { Dialog } from "vant";

// 全局注册
Vue.use(Dialog);
export default {
  name: "login",
  data() {
    return {
      username: "",
      userpwd1: "",
    };
  },
  methods: {
    loginSave() {
      axios({
        url: "vips",
      })
        .then((res) => {
          let flag = false;
          for (let i in res.data) {
            console.log(res.data[i].username);
            if (
              res.data[i].username == this.username &&
              res.data[i].userpass == this.userpwd1
            ) {
              flag = true;
            }
          }
          if (flag == true) {
            sessionStorage.setItem("username", JSON.stringify(this.username));
            Dialog.alert({
              message: "登陆成功！",
            }).then(() => {
              this.$router.push({ path: "/Index" });
            });
          } else {
            Dialog.alert({
              message: "账号或密码输入错误！",
            }).then(() => {
              this.username = "";
              this.userpwd1 = "";
            });
          }
        })
        .catch((err) => {
          console.log("出错了", err);
        });
    },
  },
  components: {},
};
</script>

<style>
html,
body {
  height: 100%;
}
html {
  font-size: 26.67vw;
}
body {
  font-size: 16px;
  display: flex;
  flex-direction: column;
}
.login_box {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.login_box .back {
  width: 100%;
  height: 0.55rem;
  font-size: 0.3rem;
  line-height: 0.55rem;
  padding-left: 0.1rem;
}
.login_box p {
  width: 100%;
  height: 0.75rem;
  line-height: 0.75rem;
  font-size: 0.24rem;
  font-weight: 700;
  text-align: center;
  line-height: 0.75rem;
}
.login_box > .msg {
  width: 100%;
  height: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.login_box > .msg > div {
  width: 3.08rem;
  height: 0.45rem;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 0.14rem;
}
.login_box > .msg > div > input {
  border: none;
  outline: none;
  background-color: #f4f4f4;
}
.login_box > .msg i {
  height: 0.2rem;
  display: block;
  font-size: 0.14rem;
  margin-top: 0.1rem;
  line-height: 0.2rem;
  color: #000;
  position: relative;
  left: 0.9rem;
}
.login_box button {
  width: 3.08rem;
  height: 0.45rem;
  background-color: #888888;
  color: #fff;
  font-size: 0.18rem;
  text-align: center;
  line-height: 0.45rem;
  border: none;
  outline: none;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.login_box .wei {
  position: absolute;
  bottom: 0.3rem;
  width: 100%;
}
.login_box .wei img {
  width: 1.85rem;
  height: auto;
  margin: 0 auto;
}
</style>
